<template>
    <div>
        <el-container>
            <el-header class="inside-header">
                <div>
                    <!-- 面包屑 -->
                    <el-breadcrumb separator=">">
                        <el-breadcrumb-item>企业环保</el-breadcrumb-item>
                        <el-breadcrumb-item>企业文件</el-breadcrumb-item>
                        <el-breadcrumb-item class="breadcrumbColor">文件管理</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-header>
            <el-main>
                <div class="inside-main-box">
                    <el-row class="inside-main" style="background: #fff;padding-top: 10px;height: 46px;">
                        <el-col :span="6" style="margin-left: 20px;">
                            <el-form-item label="文件名称" size="small">
                                <el-input v-model="form.file_name" placeholder="请输入文件名称"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-left: 5px;">
                            <el-form-item label="文件分类" size="small">
                            <el-input v-model="form.document_classification" placeholder="请输入文件分类名称"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-left: 10px;">
                            <el-button size="small" class="sele-but" icon="search" @click="getTableData(form)">查询</el-button>
                            <el-button size="small" class="empty-but" icon="refresh" @click="clear">重置</el-button>
                            <el-button size="small" icon="plus" class="add-but" @click="addDialog=true">新增</el-button>
                        </el-col>
                    </el-row>
                </div>
                <div style="background: #fff;">
                    <el-table :data="tableDataList.rows" style="width: 100%;">
                        <el-table-column align="center" label="序号" width="60" type="index" />
                        <el-table-column align="center" prop="file_name" label="文件名称" />
                        <el-table-column align="center" prop="document_classification" label="文件分类" />
                        <el-table-column align="center" prop="release_date" :formatter="function(row,column){
                              return $moment(row.release_date).format('YYYY-MM-DD')
                            }" label="发布日期" />
                        <el-table-column align="center" prop="implementation_date" :formatter="function(row,column){
                              return $moment(row.implementation_date).format('YYYY-MM-DD')
                            }" label="实施日期" />
                        <el-table-column align="center" prop="uploader" label="上传人" />
                        <el-table-column align="center" prop="file_resolution" label="文件解析">
                            <template #default="scope">
                               <!--  <span v-if="scope.row.a== 1">在线</span>
                                <span v-else-if="scope.row.2== 2">离线</span> -->
                                 <el-link target="_blank" v-if="scope.row.file_resolution" :href="scope.row.file_resolution" :underline="false" style="margin-left:15px">
                                        <el-button link type="primary" icon="view" size="size">下载</el-button>
                                  </el-link>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" fixed="right" label="操作" width="120">
                            <template #default="scope">
                                <el-button link type="primary" size="small" icon="edit" @click="updateDetail(scope.row)">修改</el-button>
                                <el-button link type="danger" size="small" icon="delete" @click="deleteRow(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
<el-pagination style="margin-top: 20%;display: flex;justify-content: flex-end;" v-model:current-page="currentPage3" v-model:page-size="pageSize3" :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="1000"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</el-main>
</el-container>
<!-- 新增弹窗 -->
<el-dialog v-model="addDialog" ref="ruleFormRef" :model="ruleForm" title="新增分类" width="40%">
    <el-form style="width:80%" label-width="120px">
      <el-form-item label="文件名称">
        <el-input disabled v-model="formData.file_name" style="width:300px" placeholder="自动回显"></el-input>
      </el-form-item>
       <el-form-item label="文件分类" prop="document_classification">
                <el-cascader  v-model="formData.parent_id" style="color:black;width:300px" :options="tableData.rows" placeholder="不选是根目录"
                             :props="defaultProps" @change="parenchange" :show-all-levels="true" change-on-select>
                </el-cascader>
            </el-form-item>
      <el-form-item label="文件名称">
        <el-upload
            ref="covers" style="margin-top:10px;float:left;width:60%"
            :file-list="formData.photolist"
            action="#" :limit="1"
            accept=".doc,.docx"
            :http-request="upload">
          <el-button type="primary" icon="upload" style="float:right">文件上传</el-button>
        </el-upload>
      </el-form-item>
       <el-form-item label="发布日期" prop="signing_date">
             <el-date-picker v-model="formData.release_date" style="width:300px" type="date" placeholder="请选择"/>
        </el-form-item>
        <el-form-item label="实施日期" prop="service_time">
             <el-date-picker v-model="formData.implementation_date" style="width:300px" type="date" placeholder="请选择"/>
        </el-form-item>
    </el-form>
    <template #footer>
                <span class="dialog-footer">
                    <el-button class="sele-but" @click="insert">
                        确定
                    </el-button>
                    <el-button class="empty-but" @click="addDialog = false">取消</el-button>
                </span>
            </template>
</el-dialog>
<!-- 修改弹窗 -->
<el-dialog v-model="updateDialog" ref="ruleFormRef" :model="ruleForm" title="新增分类" width="40%">
    <el-form style="width:80%" label-width="120px">
      <el-form-item label="文件名称">
        <el-input disabled v-model="obj.file_name" style="width:300px" placeholder="自动回显"></el-input>
      </el-form-item>
       <el-form-item label="文件分类" prop="document_classification">
              <el-cascader v-model="ruleForm.parent_id" style="color:black" :options="tableData.rows" placeholder="请重新选择"
                           :props="defaultProps" @change="parenchange" :show-all-levels="true" change-on-select>
                </el-cascader>
            </el-form-item>
      <el-form-item label="文件名称">
        <el-upload
            ref="covers" style="margin-top:10px;float:left;width:60%"
            :file-list="formData.photolist"
            action="#" :limit="1"
            accept=".doc,.docx"
            :http-request="upload">
          <el-button type="primary" icon="upload" style="float:right">文件上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
      <el-link target="_blank" :href="obj.file_resolution" :underline="false" style="margin-left:20px;margin-top:-20px">
           <el-button link type="primary" size="small">查看</el-button>
           </el-link>
      </el-form-item>
       <el-form-item label="发布日期" prop="signing_date">
             <el-date-picker v-model="obj.release_date" style="width:300px" type="date" placeholder="请选择"/>
        </el-form-item>
        <el-form-item label="实施日期" prop="service_time">
             <el-date-picker v-model="obj.implementation_date" style="width:300px" type="date" placeholder="请选择"/>
        </el-form-item>
    </el-form>
    <template #footer>
                <span class="dialog-footer">
                    <el-button class="sele-but" @click="update(obj)">
                        修改
                    </el-button>
                    <el-button class="empty-but" @click="updateDialog = false">取消</el-button>
                </span>
            </template>
</el-dialog>
</div>
</template>

<script setup>
    import {reactive,ref,onMounted} from 'vue'
    import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
    import {queryByFileName,queryByDocumentClassification,updatePolicyFile,
      insertPolicy,updatePolicy,deletePolicy,getByTypeName} from "@/api/fileType";
    import {handleTree} from '@/utils/tools.js';
    const form = reactive({
        file_name: "",
      pageSize:"10",
      pageNum:"1"
    });
    //根据条件查询
    const selectQuery = () => {
      queryByFileName(form).then((res)=>{
        tableDataList.rows=res.list;
        tableDataList.total=res.total;
      })
    }
    // 重置
    const clear = () => {
      form.file_name = ""
      form.document_classification = ""
          getTableData();
    };
    // 表格数据
    const tableData = reactive({
      flat:{},
      isExpandAll:false,
      refreshTable:true,
      row:[],
      total:0,
    });
    const tableDataList = reactive({
      flat:{},
      isExpandAll:false,
      refreshTable:true,
      row:[],
      total:0,
    })
    onMounted(() => {
      getTableData();
    });
    //级联
    const selectForm = () => {
      getByTypeName(form).then((res) => {
        res.data.forEach(e=>{
          tableData.flat[e.id] =e;
        })
        tableData.rows = handleTree(res.data,"id","parent_id","children");
      });
    };
    const parenchange = (e) =>{
      ruleForm.parent_classification =tableData.flat[e]?.type_name||"-";
      ruleForm.depth = tableData.flat[e]?.depth+1||1;
    }
    const changeModify = (e) =>{
      obj.parent_classification =tableData.flat[e]?.type_name||"-";
      obj.depth = tableData.flat[e]?.depth+1||1;
    }
    //查询接口
    const getTableData=(form={pageNum:1,pageSize:20})=>{
      queryByFileName(form).then(res=>{
        tableDataList.rows=res.list;
        tableDataList.total=res.total;
        selectForm()
      })
    }
    let formData = reactive({
      filelist:[],
      photolist:[],
      document_classification:""
    });
    const defaultProps = {
      label:"type_name",
      value:"id",
      children:"children",
      multiple:false,
      checkStrictly:true,
      emitPath: false
    }
    let covers = ref();
    //文件上传
    const upload = (file, fileList) =>{
      let loadingInstance = null;
      let size = file.file.size/1024;
      if(size>1024){
        covers.value.clearFiles();
        ElMessage({
          message: "can not more than 1M",
          type: "warning",
        });
      }else{
        let form = new FormData();
        form.append("file",file.file);
        form.append("id",file.file);
        loadingInstance = ElLoading.service({
          lock: true,
          text: "uploading……",
          background: 'rgba(0, 0, 0, 0.1)'
        });
        updatePolicyFile(form).then(res=>{
          formData.file_name = file.file.name
          // formData.urlList[indexs.upload-1].url = res;
          formData.file_resolution = res.file
          loadingInstance.close();
          covers.value.clearFiles();
          ElMessage.success('上传成功!')
        })
      }
    };
//    新增
    const addDialog = ref(false)
    const ruleForm = reactive({
      parent_id: 0,
    });
    const insert = () => {
      formData.document_classification = ruleForm.parent_classification
      insertPolicy(formData).then((res)=>{
        if(res.code == 200){
          ElMessage.success('新增成功');
          getTableData()
          addDialog.value =false
        } else {
          ElMessage.error('新增失败');
        }
      })
    }
//    删除
    const deleteRow = (index) => {
      ElMessageBox.confirm("确定要删除吗?").then(()=>{
        deletePolicy({id:index}).then((res)=>{
          getTableData()
        })
      })
    }
//    修改
    const updateDialog  = ref(false)
    let obj = reactive({
      id:"",
      file_name:"",
      document_classification:"",
      release_date:"",
      implementation_date:""
    })
    const updateDetail = (row)=>{
      updateDialog.value = true
      obj.id = row.id
      obj.file_name = row.file_name
      obj.document_classification = row.document_classification
      obj.release_date = row.release_date
      obj.file_resolution = row.file_resolution
      obj.implementation_date = row.implementation_date
    }
    const update = (row) => {
      updatePolicy(row).then((res)=>{
        if(res.code == 200){
          ElMessage.success('修改成功');
          getTableData()
          updateDialog.value = false
        } else {
          ElMessage.error('修改失败');
        }
      })
    }
</script>
<style scoped>
    /* 面包屑字体颜色更改 */

    .breadcrumbColor>>>.el-breadcrumb__inner {
        color: #000;
    }
    /* 内部header */

    .inside-header {
        height: 10px;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    /* 空心按钮样式 */

    .empty-but {
        border: 1px solid #3780b9;
        color: #3780b9;
    }
    /* 实心按钮背景样式 */

    .sele-but {
        background: #3780b9;
        border: 0px;
        border-radius: 2px;
        color: white;
    }

    .add-but {
        background: #dde5fe;
        color: #3780b9;
    }
    /* 分页 */

    .demo-pagination-block {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>
